<template>
  <el-row>
    <el-col :span="6">
      <el-select
        v-model="operationInfo.symbol"
        placeholder="请选择"
        style="width: 100%"
        @change="changeType"
      >
        <el-option
          v-for="item in operatorOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="6">
      <el-date-picker
        v-model="operationInfo.value"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        style="width: 100%"
        placeholder="选择日期时间"
        v-if="filtertype == 'time'"
        @change="change"
      >
      </el-date-picker>
      <el-select
        v-model="operationInfo.value"
        placeholder="请选择"
        style="width: 100%"
        v-else-if="
          operationInfo.symbol == 'equal' || operationInfo.symbol == 'vary'
        "
      >
        <el-option
          v-for="item in deduplicationOptions"
          :key="item.label"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>

      <el-input
        v-model="operationInfo.value"
        placeholder="请输入内容"
        style="width: 100%"
        v-else
      ></el-input>
    </el-col>
    <!-- <el-col :span="6">
    {{activeSymbolItem.viewType}}
    </el-col> -->
  </el-row>
</template>


<script>
import { getOperator } from "./utils";
import { ITypeEnums } from "./type";
export default {
  props: {
    symbol: {
      type: String,
      default: "",
    },
    value: {
      type: Object,
      default: () => ({}),
    },
    // 4.去重后的下拉框
    deduplicationOptions: {
      type: Array,
      default() {
        return [];
      },
    },
    // 传过来的列表类型
    filtertype: {
      type: String,
      default: ITypeEnums.textType,
    },
  },
  data() {
    return {
      defaultInfo: {
        symbol: "",
        value: "",
      },
    };
  },
  created() {
    this.operationInfo.symbol = this.symbol;
    // console.log(this.symbol, 11);
  },
  computed: {
    // 2.根据选择的值和输入的值实时给父级组件选择的值
    operationInfo: {
      get() {
        // if (this.value.symbol && this.value.value) {
        return this.value;
        // }
        // return this.defaultInfo;
      },
      set(newVal) {
        console.log(newVal);
        this.$emit("input", newVal);
      },
    },
    activeSymbolItem() {
      return (
        this.operatorOptions.find(
          (node) => node.value === this.operationInfo.value
        ) || ""
      );
    },
    operatorOptions() {
      // 1.最上层传过来的文本类型，获取下拉框的类型
      return getOperator(this.filtertype);
    },
  },
  methods: {
    change(val) {
      console.log(val);
    },
    changeType(val) {
      // 更换选择的时候清空值
      this.operationInfo.value = "";
    },
  },
};
</script>

<style scoped lang="less">
</style>

